<template>
  <div>
    <a-page-header class="pt-0" @back="back" :title="t('填写表单')"></a-page-header>
    <a-spin :spinning="table.loading" class="w-[100%]">
      <a-form
        layout="vertical"
        @finish="submit"
        :rules="formRules"
        :model="form"
        ref="formRef"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
      >
        <a-card :bordered="false" :body-style="{ paddingTop: '0' }">
          <a-form-item label="code" name="code">
            <a-input allow-clear v-model:value="form.id" />
          </a-form-item>

          <a-form-item label="设备颜色" name="color">
            <LocalOptions :option="SYSTEM_OPTION_TYPE.DEVICE_COLOR" v-model="form.color" />
          </a-form-item>
          <a-form-item label="缩放" name="scale">
            <a-input-number v-model="form.scale" :max="3" :min="0" :step="0.1" />
          </a-form-item>
          <a-form-item name="resolutionId" label="价签尺寸" required>
            <esl-resolutions v-model:model-value="form.resolutionId" />
          </a-form-item>

          <a-form-item name="description" :label="t('描述')" required>
            <a-textarea v-model="form.description" :max-length="40"></a-textarea>
          </a-form-item>

          <div class="flex gap-4">
            <a-button type="primary" htmlType="submit">{{ t('保存') }}</a-button>
            <a-button @click="reset">{{ t('重置') }}</a-button>
          </div>
        </a-card>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import type { IResponse } from '@/api/config/types';
import { list } from '../data/curd';
import { allowEditMenu, table } from '../data/data';
import { formRef, form, formRules } from '../data/form';
const { t } = useI18n();
import { SYSTEM_OPTION_TYPE } from '@/enum/system';
import { createModel, updateModel } from '@/api/modules/esl/model';
import { notify } from '@/utils/common/common';

const back = () => {
  allowEditMenu.value = false;
  reset();
};
const submit = async () => {
  let result: IResponse | undefined = undefined;
  if (!form.value.createTime) {
    const { data } = await createModel(form.value);
    result = data;
  } else {
    const { data } = await updateModel(form.value);
    result = data;
  }
  notify(result);
  await list();
  back();
};
const reset = () => {
  formRef.value?.resetFields();
};
</script>

<style lang="scss" scoped></style>
